<script type="x-template" id="overview-host">
	<div class="content">
		<Breadcrumb>
	        <Breadcrumb-item>服务概览</Breadcrumb-item>
	        <Breadcrumb-item>主机</Breadcrumb-item>
	    </Breadcrumb>
	    <div style="height:8px;"></div>
		<i-table v-bind:columns="columns" v-bind:data="values"></i-table>
	</div>
</script>
<script>
	(function(){
		var initData = function(){
			var self = this;
			var http = this.$http;
			var error = function(){
				self.$Notice.error({
	                title:"温馨提示",
	                desc:"数据读取失败"
	            });
			};
			http.post("${base}/api/host.json").then(function(res){
				if(res.status == 200){
					var data = [];
					var temp = res.data || [];
					for(var i=0;i<temp.length;i++){
						var values = temp[i].split(":");
						data.push({
							ID:i+1,
							IP:values[0],
							PORT:values[1],
							STATUS:"在线"
						});
					}
					self.values = data;
				}else{
					error();
				}
			}).catch(error);
		};
		Vue.component("overview-host",{
			template:"#overview-host",
			data:function(){
				initData.apply(this);
				return {
					columns:[
						{title:"ID",key:"ID",width:80},
						{title:"Host",key:"IP"},
						{title:"Port",key:"PORT"},
						{title:"Status",key:"STATUS"}
					],
					values:[]
				}
			}
		});
		routes.push({path:"/overview/host",component:Vue.component("overview-host")});
	})();
</script>